<template lang="html">
  <div class="coupon_new_item">
      <div :class="show_use ? 'base_info base_info_open' : 'base_info'">
        <div :class="show_use ? 'coupon_type open ' + coupon_type : 'coupon_type ' + coupon_type">
          <div class="money" v-if="item.coupon_type_code === 'FULL_CUT_COUPONS' || item.coupon_type_code === 'LAPSE_COUPONS'"> <em>￥</em>{{item.coupon_amount}} </div>
          <div class="money" v-if="item.coupon_type_code === 'DISCOUNT_COUPONS'"> {{item.voucher_price}} <em>折</em></div>
          <p>{{item.voucher_subtotal}}</p>
        </div>
        <div class="coupon_center_info">
          <div class="coupon_top">
            <h3>{{item.coupon_name}}</h3>
            <p>{{item.period_validity}}</p>
          </div>
          <div :class="show_use ? 'coupon_rule_item rate' : 'coupon_rule_item' " @click="show_rule">
            使用规则
          </div>
        </div>
        <div class="coupon_right">
          <!-- 正在抢购 -->
          <div class="underway" v-if="!is_received && item.unreceived >0">
            <div class="progress">
              <h4>已抢{{rate}}%</h4>
              <div class="props">
                <span :style="{width: rate + '%'}"></span>
              </div>
            </div>
            <div class="rush" @click="getCoupon(item.coupon_code, item.unreceived)">立即领取</div>
          </div>
          <div class="end" v-if="!is_received && item.unreceived === 0">
            <div class="progress">
              <h4>已抢完</h4>
              <div class="props">
                <!-- <span></span> -->
              </div>
            </div>
          </div>
          <div class="received" v-if="is_received">
            <div class="status"></div>
            <div class="btn" @click="goUsed(item.coupon_code)">立即使用</div>
          </div>
        </div>
      </div>
      <div :class="show_use ? 'coupon_use open' : 'coupon_use'">
        <div class="stor_info">
          {{item.remark}}
        </div>
        <div class="coupon_prd_list">
          <h3>可用券商品</h3>
          <div class="prdlist">
            <ul>
              <li v-for="(prd,k) in item.items" v-bind:key="k"><img v-bind:src="prd.product_image" alt="" @click="goPrdInfo(prd.default_item_id)"> </li>
              <li class="more" @click="moreProduct(item.coupon_code)"><span>查看更多</span></li>
            </ul>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Tool from '@/utils/tool.js'
import Path from '@/utils/path.js'

export default {
  props: ['item'],
  data () {
    return {
      show_use: false,
      is_received: false,
      rate: 0
    }
  },
  created () {
    if (this.$props.item.receive_status) {
      this.is_received = true
    }
    let item = this.item
    let rate = (item.circulation - item.unreceived) / item.circulation * 100
    this.rate = Math.floor(rate)
    if (item.coupon_type_code === 'FULL_CUT_COUPONS' || item.coupon_type_code === 'LAPSE_COUPONS') {
      this.coupon_type = 'reduction'
    } else {
      this.coupon_type = 'exchange'
    }
  },
  methods: {
    show_rule () {
      this.show_use = !this.show_use
    },
    goUsed (e) {
      let isClient = Tool.isClient()
      if (isClient) {
        window.location = Path() + '/product/cate?coupon_code=' + e
      } else {
        let isMini = sessionStorage.getItem('isMini')
        if (isMini) {
          window.wx.miniProgram.navigateTo({ url: '/pages/product/cate/cate?coupon=' + e + '&type=coupon' })
        } else {
          window.location = Path() + '/'
        }
      }
    },
    goPrdInfo (prdid) {
      let isClient = Tool.isClient()
      if (prdid) {
        let params = '?item_id=' + prdid
        if (isClient) {
          this.$router.push('/main/shopDetails' + params)
        } else {
          let isMini = sessionStorage.getItem('isMini')
          if (isMini) {
            window.wx.miniProgram.navigateTo({ url: '/pages/shopDetails/shopDetails' + params })
          } else {
            this.$router.push('/main/shopDetails' + params)
          }
        }
      }
    },
    getCoupon (id, unreceived) {
      if (unreceived) {
        var data = {
          coupon_code: id
        }
        this.$toast.loading({
          mask: true,
          duration: 0,
          message: '加载中...'
        })
        return new Promise((resolve, reject) => {
          this.$Axios({ url: 'coupon_user_voucher', data, method: 'post' }).then((resp) => { // 请求成功
            this.$toast.clear()
            if (resp.return_code === '0000') {
              this.is_received = true
              this.$toast('领取成功！')
            } else {
              this.$toast(resp.return_msg)
            }
            resolve(resp)
          }).catch((error) => { // 请求失败
            this.$_requestInterceptor('error', error)
            this.$toast.clear()
            reject(error)
          })
        })
      } else {
        this.$toast('去首页看看')
      }
    },
    moreProduct (e) {
      let isClient = Tool.isClient()
      if (isClient) {
        window.location = Path() + '/product/cate?coupon_code=' + e
      } else {
        let isMini = sessionStorage.getItem('isMini')
        if (isMini) {
          window.wx.miniProgram.navigateTo({ url: '/pages/product/cate/cate?coupon=' + e + '&type=coupon' })
        } else {
          window.location = Path() + '/product/cate?coupon_code=' + e
        }
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
